<!--#include file="/public/basepages/header.shtml"-->
<link rel="stylesheet" href="/writer/css/main.css" />
<link rel="stylesheet" href="/public/base-style/muggle-note.css" />

<!-- 内容开始 -->
<form id="art-msg-form" style="display: block;">
    <h1>请开始你的表演</h1>
    <p class="subtitle">Please begin your show</p>

    <div id="step-box">
        <div class="step-pice" step="1" state="on">
            <div class="alpha"></div>
            <div class="step-pice-icon"></div>
            <div class="step-pice-text">
                <b>Step 1:</b>
                <p>填写文章信息</p>
            </div>
        </div>

        <div class="step-pice" step="2" state="off">
            <div class="alpha"></div>
            <div class="step-pice-icon"></div>
            <div class="step-pice-text">
                <b>Step 2:</b>
                <p>编辑文章内容</p>
            </div>
        </div>

        <div class="step-pice" step="3" state="off">
            <div class="alpha"></div>
            <div class="step-pice-icon"></div>
            <div class="step-pice-text">
                <b>Step 3:</b>
                <p>选择发布方式</p>
            </div>
        </div>
    </div>

    <!-- 表单填写部分 -->
    <div id="form-input" step="1">
        <div class="form-input-box">
            <label for="title">文 章 标 题:</label>
            <input type="text" name="title" />
            <p>此选项决定其他用户在那里可以看到您的文章</p>
        </div>
        <div class="form-input-box">
            <label for="title">文 章 简 介:</label>
            <input type="text" name="intro" />
            <p>此段文字主要用于展示，最多100字</p>
        </div>
        <div class="form-input-box">
            <label for="title">关 键 字:</label>
            <input type="text" name="sign" />
            <p>多个关键字请用半角逗号分隔</p>
        </div>
        <div class="form-input-box">
            <label>文 章 分 类:</label>
            <lable for="type" class="type-radio">
                <b>学习</b>
                <input type="radio" value="0" name="type" />
            </lable>
            <lable for="type" class="type-radio">
                <b>生活</b>
                <input type="radio" value="1" name="type" />
            </lable>
            <lable for="type" class="type-radio">
                <b>工作</b>
                <input type="radio" value="1" name="type" />
            </lable>
            <lable for="type" class="type-radio">
                <b>其他</b>
                <input type="radio" value="1" name="type" />
            </lable>
            <p>此选项决定其他用户在那里可以看到您的文章</p>
        </div>
        <!-- 提交按钮 -->
        <div class="form-input-box">
            <button type="button" class="btn form-save" id="done">保存进入下一步</button>
        </div>
    </div> <!-- end of #form-input -->

    <!-- 右侧提示版 -->
    <div id="right-board">
        <!-- 此处生成提示版 -->
    </div>

<!-- 第二步 -->
    <div id="note" step="2" style="display:none;">

    </div>
    <button type="button" step="2" class="btn form-save" style="display:none;" id="done2">保存进入下一步</button>
    <button type="button" step="2" class="btn-grey form-save" style="display:none;" id="back2">返回上一步</button>

<!-- 第三步 -->
    <div id="final-step" style="display:none;">
        <button id="send-pre" mode="0" type="button">私密上传</button>
        <button id="send-pub" mode="1" type="button">共享发布</button>

        <!--<button type="button" class="btn-grey form-save" id="back3">返回上一步</button>-->
        <div id="back3" class="back3">返回上一步</div>
    </div>
    <div id="msg-board" style="display:none;">
        <!-- 此处生成提示版 -->
    </div>
</form>


<script src="/public/site-block/message-board.js"></script>
<script src="/public/muggle/muggle-note.js"></script>
<script src="./jscript/main.js"></script>

<!--#include file="/public/basepages/footer.shtml"-->